<template>
  <div>
    <div>
      <el-card shadow="never" :body-style="{padding:'0px'}">
        <!--        <el-row :gutter="24">-->
        <!--          <el-col :span="4" v-for="item in tabsList" style="position: relative" :key="item.id">-->
        <!--            <div @click="handleClick(item.id)" class="table_list">-->
        <!--              {{ item.name }}-->
        <!--            </div>-->
        <!--            <div :class="{tabsActive:item.id === activeName }" class="tabs_silde"></div>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick($event.name)">
          <el-tab-pane v-for="item in tabsList" :key="item.id" :label="item.name"
                       :name="item.id.toString()">

          </el-tab-pane>
        </el-tabs>
      </el-card>
      <el-card shadow="never" style="margin-top: 10px">
        <keep-alive>
          <!--       产品配置-->
          <Config v-if="activeName === '129'" :anthId="129" :panePermiss="panePermiss"></Config>
          <!--     展期配置 -->
          <ExhibitionConfig v-else-if="activeName === '135'" :panePermiss="panePermiss"></ExhibitionConfig>
          <!--     升级规则配置 -->
          <upDataConfig v-else-if="activeName === '140'" :panePermiss="panePermiss"></upDataConfig>
          <!--          PeriodConfig-->
<!--          <PeriodConfig  v-else-if="activeName === '1046'" :panePermiss="panePermiss"></PeriodConfig>-->
          <!--     平级规则配置 -->
          <LevelRuleConfig v-else-if="activeName === '145'" :panePermiss="panePermiss"></LevelRuleConfig>
          <!--     降级规则配置 -->
          <DemotionRuleConfig v-else-if="activeName === '150'" :panePermiss="panePermiss"></DemotionRuleConfig>
          <!--     导航栏/资源配置 -->
          <NavigationConfig v-else-if="activeName === '155'" :panePermiss="panePermiss"></NavigationConfig>

        </keep-alive>
      </el-card>
    </div>
  </div>
</template>

<script>
// 产品配置
import Config from "./Config";
// 降级规则配置
import DemotionRuleConfig from "./demotionRuleConfig";
// 展期配置
import ExhibitionConfig from "./exhibitionConfig";
// 平级规则配置
import LevelRuleConfig from "./levelRuleConfig";
//  导航栏/资源配置
import NavigationConfig from "./navigationConfig";
// 升级规则配置
import UpDataConfig from "./upDataConfig";
// 可借周期配置
// import PeriodConfig from './periodConfig'
import {mapGetters} from "vuex";

export default {
  components: {
    Config,
    DemotionRuleConfig,
    ExhibitionConfig,
    LevelRuleConfig,
    NavigationConfig,
    UpDataConfig,
    // PeriodConfig
  },
  created() {
  },
  data() {
    return {
      activeName: '',
      tabsList: [],
    }
  },
  computed: {
    ...mapGetters([
      'permissionList'
    ]),
    panePermiss() {
      const obj = {}
      this.tabsList.forEach(item => {
        if (parseInt(this.activeName) === item.id && item.children) {
          item.children.forEach(i => {
            obj[i.id] = i.url
          })
        }
      })
      return obj
    }
  },
  mounted() {
    this.getButtonAuth()
  },
  methods: {
    handleClick(id) {
      this.activeName = id.toString()
    },
    async getButtonAuth() {
      const {permissId} = this.$route.query
      const res = this.permissionList.filter(father => {
        const childArr = this.permissionList.filter(child => father.id === child.parentId)
        if (childArr.length > 0) {
          father.children = childArr
        }
        return father.parentId === parseInt(permissId)
      })
      this.tabsList =res
      this.activeName = res[0].name
      this.handleClick(res[0].id)
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-tabs__active-bar {
  height: 4px !important;
}

::v-deep .el-tabs__item {
  //padding: 15px!important;
}

::v-deep .el-tabs__header {
  margin: 0px !important;
}

::v-deep .el-tabs__nav {
  padding: 10px 0;
}

::v-deep .el-tabs__nav-next {
  line-height: 60px !important;
}

::v-deep .el-tabs__nav-prev {
  line-height: 60px !important;
}

.tabsActive {
  background-color: #ff8a00;
}

.table_list {
  box-sizing: border-box;
  text-align: center;
  position: relative;
  font-size: 16px;
  cursor: pointer;
  padding: 15px 0;

}

.tabs_silde {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  //background-color: #ff8a00;
}
</style>
